<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>绑定合作商会员</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="${contextPath}/staticwx/style/weui.css"/>
    <link rel="stylesheet" href="${contextPath}/staticwx/style/weui2.css"/>
    <link rel="stylesheet" href="${contextPath}/staticwx/style/weui3.css"/>
    <script src="${contextPath}/staticwx/zepto.min.js"></script>
    <script src="${contextPath}/staticwx/public.js"></script>
    <style>
        .weui_btn_grey{background-color:grey;}
    </style>
</head>

<body ontouchstart style="background-color: #f8f8f8;">
<form id="form">
    <div class="weui_cells weui_cells_form" style="margin-top: 0;">
        <div class="weui_cell">
            <div class="weui_cell_hd">
                <label class="weui_label">城市</label>
            </div>
            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" type="hidden" name="cityId" id="cityId" value="${cityId!}"/>
                <input class="weui_input" type="text" value="${dict.getCityName(cityId?c)}" readonly/>
            </div>
        </div>
        <div class="weui_cell">
            <div class="weui_cell_hd"><label class="weui_label">手机号</label></div>
            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" type="number"  maxlength="11" placeholder="输入您的手机号" name="tel" id="tel"/>
            </div>
            <div class="weui_cell_ft">
                <i class="weui_icon_warn"></i>
            </div>
        </div>
        <div class="weui_cell weui_vcode">
            <div class="weui_cell_hd"><label class="weui_label">验证码</label></div>
            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" type="number" required
                       placeholder="请输入验证码" tips="请输入验证码"  name="code" id="code">
            </div>
            <div class="weui_cell_ft" id="sendCodeDiv" style="text-align: center;">
                <i class="weui_icon_warn"></i>
                <a href="javascript:void(0);" style="width: 130px;;" class="weui-vcode-btn" id="codeText">获取验证码</a>
            </div>
        </div>
    </div>
    <label for="regCk" class="weui-agree" style="text-align: center;">
        <input id="regCk" class="weui-agree-checkbox" type="checkbox">
        <span class="weui-agree-text">
                阅读并同意<a href="javascript:void(0);">《注册协议》</a>
            </span>
    </label>
    <div class="weui_btn_area" style="margin-top: 0;">
        <a id="formSubmitBtn" href="javascript:" class="weui_btn weui_btn_grey">提交</a>
    </div>
</form>
<input type="hidden" id="sendEnable" value="1"/>
<input type="hidden" id="mid" value="${merchantId!}"/>
<input type="hidden" id="memberid" value="${member.id!}"/>

<script>
    $(function(){
        $("#sendCodeDiv").on("click",function () {
            var tel=$("#tel").val();
            if(tel==''){
                showMsg("请输入手机号");
                $("#tel").focus();
                return false;
            }
            if(!isMobile(tel)){
                showMsg("手机号格式有误");
                $("#tel").focus();
                return false;
            }
            var sendEnable=$("#sendEnable").val();//防止多次请求
            if(sendEnable==1){
                var mid=$("#mid").val();
                $("#sendEnable").val(0);
                getCode(tel,mid);//获取手机验证码
            }
        })

        $("#formSubmitBtn").on("click",function () {
            var tel=$("#tel").val();
            if(tel==""){
                showMsg("手机号不能为空");
                return false;
            }
            var code=$("#code").val();
            if(code==""){
                showMsg("验证码不能为空");
                return false;
            }

            if(!$('#regCk').is(':checked')) {
                showMsg("请先阅读并同意注册协议");
                return false;
            }else{
                checkCode(tel,code);//校验验证码
            }
        });
        $("#regCk").on("change",function () {
            if($(this).is(':checked')) {
                $("#formSubmitBtn").removeClass("weui_btn_grey");
                $("#formSubmitBtn").addClass("weui_btn_primary");
            }else{
                $("#formSubmitBtn").removeClass("weui_btn_primary");
                $("#formSubmitBtn").addClass("weui_btn_grey");
            }
        })
    })

    //发送验证码倒计时
    var seconds=60;//倒计时开始秒数
    function timer(){
        window.setTimeout(function(){
            seconds--;
            if(seconds > 0) {
                $('#codeText').html(seconds+"s后重新获取");
                timer();
            } else {
                $("#sendEnable").val(1);//允许再次发送验证码
                seconds=60;
                $("#codeText").html("再次发送");
            }
        }, 1000);
    }
    
    function  getCode(tel,mid) {
        $.ajax({
            url : '${contextPath}/wx/msg/sendCode.htm',
            data : {
                tel : tel,
                mid:mid,
                type:"bind_merchant"
            },
            type : 'post',
            cache : false,
            dataType : 'json',
            success : function(data) {
                var json = $.parseJSON(data);
                if (json.isSuccess == true) {
                    showMsg("发送成功");
                    timer();//调用倒计时
                } else {
                    $("#sendEnable").val(1);//允许再次发送验证码
                    showMsg(json.errMessage);
                }
            },
            error : function() {
                $("#sendEnable").val(1);//允许再次发送验证码
                showMsg("异常");
            }
        });
    }

    function  checkCode(tel,code) {
        $.ajax({
            url : '${contextPath}/wx/msg/checkCode.htm',
            data : {
                tel : tel,
                code:code
            },
            type : 'post',
            cache : false,
            dataType : 'json',
            success : function(data) {
                var json = $.parseJSON(data);
                if (json.isSuccess == true) {
                    var mid=$("#mid").val();
                    var cid=$("#cityId").val();
                    var memberid=$("#memberid").val();
                    doBind(mid,memberid,cid,tel);
                } else {
                    showMsg(json.errMessage);
                }
            },
            error : function() {
                showMsg("异常");
            }
        });
    }

    function  doBind(mid,memberid,cid,tel) {
        $.ajax({
            url : '${contextPath}/wx/doBindMerchant.htm',
            data : {
                tel:tel,
                mid:mid,
                memberid:memberid,
                cid:cid
            },
            type : 'post',
            cache : false,
            dataType : 'json',
            success : function(data) {
                var json = $.parseJSON(data);
                if (json.isSuccess == true) {
                    showMsg("提交成功");
                    location.href="${contextPath}/wx/drainage.htm?mid="+mid;
                 } else {
                    showMsg(json.errMessage);
                }
            },
            error : function() {
                showMsg("异常");
            }
        });
    }
</script>
</body>
</html>